@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/public.css')}}">
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/demand.css')}}">

@section('content')
<div class="mainHrContent" id="hrMain">
    <div class="storelistTitle" id="storelistTitle" v-cloak>
        <span class="storelistTitle_left">
            <span>
                <img src="{{URL::asset('./img/icon/home.png')}}">
            </span>
            <span><a href="{{route('home.index.index') }}">首页</a> >
                <a href="{{route('home.suppliermy.supplierIndex') }}">供应商中心</a>
                > 消息查看中心
            </span>
        </span>
        <!-- <span class="storelistTitle_right">
            <span>找不到合适的供应商？发个需求试试？</span>
            <button @click="window.location.href ='{{ route('home.demand.demandAdd')}}'">免费发布需求</button>
        </span> -->
    </div>
    <div class="hrContent">
        @include('home.suppliermy.menu')
        <div class="basicInfo" id="hrMains" v-cloak>
            <div class="basicInfo_title">
                <span></span>
                消息查看中心 
                <!-- (@{{listData.length}}) -->
                <button class="mainButton" @click="deleteList">删除</button>
                <button class="mainButton" @click="readList">标记已读</button>
            </div>
            <div class="orderMain_header">
                <span>消息状态：</span>
                <button :class="{active:status==0}" @click="status=0">不限</button>
                <button :class="{active:status==2}" @click="status=2">
                    <img src="{{URL::asset('./img/icon/read.png')}}">
                    已读
                </button>
                <button :class="{active:status==1}" @click="status=1">
                    <img src="{{URL::asset('./img/icon/unread.png')}}">
                    未读
                </button>
            </div>
            <div class="tableAddr">
                <table>
                    <thead>
                        <tr>
                            <th style="width: 39px;">
                                <span @click="checkAll" class="check" :class="{active:boolLen==listData.length}">
                                    <img src="{{URL::asset('./img/icon/gou.png')}}">

                                </span>
                            </th>
                            <th>通知内容</th>
                            <th>时间</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in listData" @click="getDetails(item)">
                            <td style="width: 39px;">
                                <span class="check" :class="{active:item.bool}" @click.stop="checkChil(item)">
                                    <img src="{{URL::asset('./img/icon/gou.png')}}">
                                </span>
                            </td>
                            <td style="max-width:300px;">@{{item.title}}</td>
                            <td>
                                @{{item.created_at}}
                            </td>
                            <td>
                                <img class="readMail" v-if="item.status==1" src="{{URL::asset('./img/icon/unread.png')}}">
                                <img class="readMail" v-if="item.status==2" src="{{URL::asset('./img/icon/read.png')}}">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="elementPage" style="margin-top: 20px;" v-if="pageCount>0">
                <el-pagination :pager-count="5" @current-change="handleCurrentChange" :current-page.sync="pageNumber" background prev-text="上一页" next-text="下一页" layout="prev, pager, next,jumper" :total="pageCount">
                </el-pagination>
            </div>
            <el-dialog :visible.sync="dialogVisible" width="508px" :before-close="handleClose">
                <div class="basicInfo_title">
                    <span></span>
                    @{{detailsData.title}}
                    <a class="dialogFalse" @click="handleClose">×</a>
                </div>
                <div class="dialogMain">
                    <p class="logTitle">
                        @{{detailsData.content}}
                    </p>
                    <!-- <div class="logButton">
                        <button class="logButton_red"><a href="">去投标</a></button>
                    </div> -->
                </div>
            </el-dialog>
            <el-dialog :visible.sync="dialogVisible1" width="508px" :before-close="handleClose">
                <div class="basicInfo_title">
                    <span></span>
                    匹配订单通知
                    <a class="dialogFalse" @click="handleClose">×</a>
                </div>
                <div class="dialogMain">
                    <p class="logTitle">
                        亲爱的用户：
                        <br />
                        这里有一条扣费通知，2019-07-06 13:30 有用户主动联系您，我们已扣除您
                        <a>
                            30元
                        </a>
                        的信息费用，您可去
                        <a>
                            财务信息管理中心
                        </a>
                        核实
                    </p>
                    <div class="logButton">
                        <button class="logButton_red"><a href="{{route('home.suppliermy.supplierAssetsInfo') }}">去核实</a></button>
                    </div>
                </div>
            </el-dialog>
            <el-dialog :visible.sync="dialogVisible2" width="508px" :before-close="handleClose">
                <div class="basicInfo_title">
                    <span></span>
                    匹配订单通知
                    <a class="dialogFalse" @click="handleClose">×</a>
                </div>
                <div class="dialogMain">
                    <p class="logTitle">
                        亲爱的用户：
                        <br />
                        这里有一条订单匹配通知，经过平台的回访核实，您已与某用户达成合作并签订了合同，请通过我们给您的跳转按钮去
                        上传合同
                        <a>
                            （7天内）
                        </a>
                        ，谢谢合作。
                    </p>
                    <div class="logButton">
                        <button class="logButton_red"><a href="{{route('home.demand.demandSupplierDetails') }}">去上传</a></button>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</div>
<style>
    tbody>tr:not(:last-child) {
        border-bottom: 1px solid rgba(204, 204, 204, 1);
    }

    .tableAddr tbody>tr a {
        display: flex;
        align-items: center;
        padding: 4px 8px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        border-radius: 2px;
        background: rgba(209, 0, 24, 1);
    }

    .dialogMain>p {
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 20px;
        color: rgba(51, 51, 51, 1);
    }

    .dialogMain>p>a {
        color: #D10018
    }

    .logButton {
        margin-top: 40px;
        display: flex;
        justify-content: center;

    }

    .logButton_red {
        width: 160px;
        height: 40px;
        opacity: 1;
        border: 0px;
        border-radius: 2px;
        background: rgba(209, 0, 24, 1);
    }

    .logButton_red>a,
    .logButton_red>a:hover,
    .logButton_red>a:focus {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 14px;
        color: rgba(255, 255, 255, 1);
    }
</style>
@endsection
@section('compontentScipts')
<script>
    $(() => {
        let hrMain = new Vue({
            el: '#hrMains',
            data: () => {
                return {
                    dialogVisible: false,
                    dialogVisible1: false,
                    dialogVisible2: false,
                    pageNumber: 1,
                    pageCount: 0,
                    status: 0,
                    boolLen: 0,
                    listData: [],
                    detailsData: {},
                    checkId: [],
                }
            },
            watch: {
                status(newV) {
                    this.getList();
                }
            },
            created() {
                this.getList();
            },
            mounted() {},
            methods: {
                getDetails(item) {
                    this.detailsData = item;
                    this.dialogVisible = true;
                    let data = {
                        maile_id:item.id
                    }
                    apiAjax("{{ route('home.user.userMailsDetailsApi')}}", 'get', data, (res) => {
                this.getList();
                    }, (erro) => {
                    });
                },
                checkAll() {
                    if (this.boolLen == this.listData.length) {
                        this.boolLen = 0;
                        this.listData.forEach(element => {
                            element.bool = false;
                        });
                    } else {
                        this.boolLen = this.listData.length;
                        this.listData.forEach(element => {
                            element.bool = true;
                        });
                    }
                },
                getList() {
                    let data = {
                        page: this.pageNumber,
                        status: this.status,
                    }
                    apiAjax("{{ route('home.user.userMailsListApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.pageCount = res.data.total;
                            res.data.data.forEach(element => {
                                element['bool'] = false;
                            });
                            this.listData = res.data.data;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                checkChil(item) {
                    this.boolLen = 0;
                    item.bool = !item.bool;
                    this.checkId = [];
                    this.listData.forEach(element => {
                        if (element.bool) {
                            this.boolLen += 1;
                            this.checkId.push(element.id)
                        }
                    });
                },
                handleCurrentChange(val) {
                    this.pageNumber = val;
                    this.getList();
                },
                deleteList() {
                    if (this.checkId.length > 0) {
                        let data = {
                            maile_id: this.checkId.join(),
                        }
                        apiAjax("{{ route('home.user.userMailsDeleteApi')}}", 'post', data, (res) => {
                            if (res.code == 0) {
                                this.$message({
                                    message: res.msg,
                                    type: 'success'
                                });
                                this.getList();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }
                        }, (erro) => {

                        });
                    }
                },
                readList() {
                    if (this.checkId.length > 0) {
                        let data = {
                            maile_id: this.checkId.join(),
                        }
                        apiAjax("{{ route('home.user.userMailsReadApi')}}", 'post', data, (res) => {
                            if (res.code == 0) {
                                this.$message({
                                    message: res.msg,
                                    type: 'success'
                                });
                                this.getList();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }
                        }, (erro) => {

                        });

                    }
                },
                handleClose(done) {
                    this.dialogVisible = false;
                    this.dialogVisible1 = false;
                    this.dialogVisible2 = false;
                },
            }
        })
    })
</script>
@endsection